import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import renderModal, {
    getModelValue,
    initModelValue,
    type FormModalDto
} from '@/components/modal/Modal'
import { addReceiptInfo, editReceiptInfo, getDeptDetail } from '@/api/system'
import type { ReceiptDto } from '@/api/customer/types'
import { message } from 'ant-design-vue'
import type { AddType } from '@/api/types'
@Component
export class DialogAddAcount extends Render {
    @Prop() show!: boolean
    @Prop({ default: 'add' }) type?: AddType
    @Prop() itemData?: ReceiptDto
    @Prop() channelId!: number

    @Watch('show')
    async handleShow() {
        this.basicFormConfig.show = this.show
        if (this.show) {
            this.basicFormConfig.title = this.type === 'add' ? '新增收款账户' : '修改收款账户'
            this.type === 'edit' && initModelValue(this.basicFormConfig, this.itemData)
        }
    }

    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Emit('refresh')
    handleRefresh() {}

    basicFormConfig = this.initBasicFormConfig() as FormModalDto
    initBasicFormConfig() {
        return {
            title: '',
            width: '500px',
            theme: 'light',
            show: false,
            labelCol: {
                style: {
                    width: '12em'
                }
            },
            items: {
                bankName: {
                    name: '收款账户名',
                    element: 'input',
                    required: true
                },
                bankNameAbbreviation: {
                    name: '收款账户名简称',
                    element: 'input',
                },
                openBank: {
                    name: '开户行',
                    element: 'input',
                    required: true
                },
                bankNo: {
                    name: '银行卡号',
                    element: 'input',
                    required: true
                },
                wechatMchId: {
                    name: '微信商户号',
                    element: 'input',
                    required: true
                },
                wechatMchKey: {
                    name: '微信商户号标识',
                    element: 'input',
                },
                apiKey: {
                    name: 'apiKey',
                    element: 'input',
                },
                keyPath: {
                    name: '证书路径(keyPath)',
                    element: 'input',
                },
                privateCertPath: {
                    name: '证书路径(privateCertPath)',
                    element: 'input',
                },
                privateKeyPath: {
                    name: '证书路径(privateKeyPath)',
                    element: 'input',
                },

            },
            complete: async () => {
                const data = getModelValue(this.basicFormConfig)
                data.channelId = this.channelId
                if(this.type === 'add') {
                    await addReceiptInfo(data)
                } else {
                    data.id = this.itemData?.id
                    await editReceiptInfo(data)
                }
                message.success('操作成功')
                this.handleRefresh()
                this.onCancel()
            },
            cancel: () => {
                this.onCancel()
            },
            init: () => {
                // initModelValue(this.basicFormConfig)
            }
        } as FormModalDto
    }

    async getDetail(id: number) {
        return await getDeptDetail(id)
    }

    onCancel() {
        this.basicFormConfig.show = false
        this.updateShow(false)
        initModelValue(this.basicFormConfig)
    }

    render() {
        return <>{renderModal(this.basicFormConfig)}</>
    }
}

export default toNative<{channelId: number, type: AddType, itemData?: ReceiptDto}, {refresh: () => void}>(DialogAddAcount)
